<template>
  <a-modal
    width="100%"
    :bodyStyle="{ height: '100%'}"
    :visible="modalVisible"
    @cancel="() => modalVisible = false"
    :footer="false"
    :centered="true"
    title="历史版本数据"
  >
    <a-spin :spinning="spinning">
      <div class="material_modal">
        <div class="flex-item-2 material_label_div">
          <a-timeline>
            <a-timeline-item v-for="(item, index) in oldVersionMaterials" :key="index">
              <a-icon v-if="index == 0" slot="dot" type="check-circle" style="font-size: 16px;"/>
              <a-icon v-else slot="dot" type="clock-circle-o" style="font-size: 16px;" :style="index == selectIndex ? {color: '#FFBA00'}:{color:'#1890ff'}"></a-icon>
              <div @click="changeFile(item, index)">
                <div>
                  <span class="material_label">文件名：</span> {{ item.file.filename }}
                </div>
                <div v-if="index == 0">
                  <span class="material_label">版本：</span>  最新版本
                </div>
                <div v-else>
                  <span class="material_label">版本：</span>  {{ item.version }} 号
                </div>
                <div>
                  <span class="material_label">修改人：</span> {{ item.username }}
                </div>
                <div>
                  <span class="material_label">修改时间：</span> {{ item.createtime }}
                </div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </div>
        <div class="flex-item-6 material_div">
          <div class="material_current">当前版本</div>
          <iframe
            id="currentIframe"
            v-show="currentFileUrl != ''"
            :src="currentFileUrl"
            width="100%"
            height="100%"
            scrolling="yes"
            frameborder="0" ></iframe>
        </div>
        <div class="flex-item-6 material_div">
          <div class="material_history">历史版本</div>
          <iframe
            id="oldIframe"
            v-show="oldFileUrl != ''"
            :src="oldFileUrl"
            width="100%"
            height="100%"
            scrolling="yes"
            frameborder="0" >
          </iframe>
        </div>
      </div>
    </a-spin>

  </a-modal>
</template>

<script>
import { kkfilePreview } from '@/utils/util'
import { findOldOptionMaterialMap } from '@/api/accept/aprv_materials_options'
export default {
  // props: {
  //   applyid: {
  //     type: String,
  //     required: true
  //   }
  // },
  data () {
    return {
      oldVersionMaterials: [],
      currentMaterial: {},
      modalVisible: false, // 模态框显示
      currentFileUrl: null,
      oldFileUrl: null,
      selectIndex: 0,
      spinning: false
    }
  },
  created () {
  },
  methods: {
    init (currentMaterial) {
      this.currentMaterial = currentMaterial
      this.currentFileUrl = kkfilePreview(this.currentMaterial.path)
      this.findOldOptionMaterialMap()
    },

    changeFile (fileItem, index) {
      // 第一份文件为当前最新版本的文件，无法修改
      if (index == 0) {
        return
      }
      this.selectIndex = index
      this.oldFileUrl = kkfilePreview(fileItem.file.path)
    },
    /**
     * 查询当前的历史版本的数据
     */
    findOldOptionMaterialMap () {
      const materialList = [].concat(this.currentMaterial.materialId)
      this.spinning = true
      findOldOptionMaterialMap(materialList)
        .then(res => {
          // console.log('表格数据:', res.data)
          this.oldVersionMaterials = res.data[this.currentMaterial.materialId]
          if (this.oldVersionMaterials && this.oldVersionMaterials.length > 1) {
            this.changeFile(this.oldVersionMaterials[1], 1)
            this.modalVisible = true
          } else {
            this.$message.warn('当前文件版本为最新文件无其他历史版本')
            this.modalVisible = false
          }
        })
        .catch(err => {
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.spinning = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
    .material_modal {
      display: flex;
      min-height: 800px;
    }
    .material_label_div {
      display: flex;
      align-items: center;
      flex-direction: column;
      align-items: normal;
      justify-content: flex-start;
      padding: 16px 10px;
      cursor: pointer;
      border:2px solid #0072C6;
    }
    .material_label {
      font-size: 16px;
      color: #0072C6;
      display: contents;
    }
    .material_div {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border:2px solid #0072C6;
      border-left: 0px;
      padding: 10px 10px;
    }
    .material_current {
      margin: 20px 10px;
      font-family: PingFang SC;
      font-weight: 800;
      font-size: 20px;
      color: #0072C6;
      line-height: 7px;
    }
    .material_history {
      margin: 20px 10px;
      font-family: PingFang SC;
      font-weight: 800;
      font-size: 20px;
      color: #FFBA00;
      line-height: 7px;
    }
</style>
